<template>
	<div class="center_view" :style='{}'>
		<!-- 添加全局加载指示器 -->
		<div v-if="loading" class="global-loading-overlay">
			<div class="loading-spinner">
				<el-icon class="is-loading"><loading /></el-icon>
				<span>加载中...</span>
			</div>
		</div>
		
		<div class="section_title">
			<span>{{formName}}</span>
		</div>
		<div class="usersView">
			<div class="usersTabView">
				<div class="usersTab" :class="tabIndex=='center'?'usersTabActive':''" @click="tabClick({tableName:'center'})">个人中心</div>
				<div class="usersTab" :class="tabIndex=='updatePassword'?'usersTabActive':''" @click="tabClick({tableName:'updatePassword'})">修改密码</div>
                <div class="usersTab" :class="tabIndex=='friend'?'usersTabActive':''" @click="tabClick({tableName:'friend'})">好友列表</div>
                <div class="usersTab" :class="tabIndex=='chat'?'usersTabActive':''" @click="tabClick({tableName:'chat'})">聊天记录</div> 
                <div class="usersTab" :class="tabIndex=='xiangmuxinxi'?'usersTabActive':''" @click="tabClick({tableName:'xiangmuxinxi'})">项目管理</div>
                <div class="usersTab" :class="tabIndex=='xiangmuchengguo'?'usersTabActive':''" @click="tabClick({tableName:'xiangmuchengguo'})">项目成果</div>
                <div class="usersTab" :class="tabIndex=='chuangyehuodong'?'usersTabActive':''" @click="tabClick({tableName:'chuangyehuodong'})">创业活动</div>
                <div class="usersTab" :class="tabIndex=='chuangyedasai'?'usersTabActive':''" @click="tabClick({tableName:'chuangyedasai'})">创业大赛</div>
                <div class="usersTab" :class="tabIndex=='zhishichanquan'?'usersTabActive':''" @click="tabClick({tableName:'zhishichanquan'})">知识产权</div>
                <div class="usersTab" @click="tabClick({tableName:'storeup',type:1})">我的收藏</div>
				<div class="usersTab" @click="homeClick()">返回首页</div>
			</div>
			<div class="usersBox updateInfo" v-if="tabIndex=='center'">
				<!-- 添加数据加载状态指示器 -->
				<div v-if="!userForm.id && !loading" class="data-placeholder">
					<el-empty description="加载数据中，请稍候..." :image-size="100">
						<el-button @click="refreshUserData">重新加载</el-button>
					</el-empty>
				</div>
				
				<el-form class="usersForm" ref="userFormRef" :model="userForm" label-width="120px" :rules="rules">
					<el-row>
						<el-col :span="12">
							<el-form-item prop="daoshigonghao" label="导师工号">
								<el-input class="list_inp" v-model="userForm.daoshigonghao" placeholder="导师工号" readonly disabled></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item prop="daoshixingming" label="导师姓名">
								<el-input class="list_inp" v-model="userForm.daoshixingming" placeholder="导师姓名" readonly disabled></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="性别" prop="xingbie">
								<el-select
									class="list_sel"
									v-model="userForm.xingbie" 
									placeholder="请选择性别"
									style="width:100%;"
									>
									<el-option v-for="(item,index) in xingbieLists" :label="item" :value="item">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item prop="zhicheng" label="职称">
								<el-input class="list_inp" v-model="userForm.zhicheng" placeholder="职称"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item prop="leixing" label="导师类型">
								<el-select
									class="list_sel"
									v-model="userForm.leixing" 
									placeholder="请选择导师类型"
									style="width:100%;"
									>
									<el-option v-for="(item,index) in leixingLists" :label="item" :value="item">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-if="userForm.leixing === '校内导师'">
							<el-form-item prop="suozaidanwei" label="所在单位">
								<el-input class="list_inp" v-model="userForm.suozaidanwei" placeholder="所在单位"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-if="userForm.leixing === '校内导师'">
							<el-form-item prop="suozaiyuanxi" label="所在院系">
								<el-input class="list_inp" v-model="userForm.suozaiyuanxi" placeholder="所在院系"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-if="userForm.leixing === '校外导师'">
							<el-form-item label="城市" prop="chengshi">
								<el-select
									class="list_sel"
									v-model="userForm.chengshi" 
									placeholder="请选择城市"
									style="width:100%;"
									@change="(e)=>change1(e,'chengshi')">
									<el-option v-for="(item,index) in chengshiLists" :label="item" :value="item">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-if="userForm.leixing === '校外导师'">
							<el-form-item label="园区" prop="yuanqu">
								<el-select
									class="list_sel"
									v-model="userForm.yuanqu" 
									placeholder="请选择园区"
									style="width:100%;"
									@change="(e)=>change2(e,'yuanqu')">
									<el-option v-for="(item,index) in yuanquLists" :label="item" :value="item">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
					
						<el-col :span="24">
							<el-form-item prop="touxiang" label="头像">
								<uploads
									action="file/upload" 
									tip="请上传头像"
									style="width: 100%;text-align: left;"
									:fileUrls="userForm.touxiang?userForm.touxiang:''" 
									@change="touxiangUploadSuccess">
								</uploads>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item prop="lianxidianhua" label="联系电话">
								<el-input class="list_inp" v-model="userForm.lianxidianhua" placeholder="联系电话"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item prop="xiangmufenlei" label="项目分类">
								<el-input class="list_inp" v-model="userForm.xiangmufenlei" placeholder="项目分类"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item prop="zhuanyejingyan" label="专业经验">
								<el-input class="list_inp" v-model="userForm.zhuanyejingyan" placeholder="专业经验"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item prop="zhidaojingyan" label="指导经验">
								<el-input class="list_inp" v-model="userForm.zhidaojingyan" placeholder="指导经验"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item prop="xueshubeijing" label="学术背景">
								<el-input class="list_inp" v-model="userForm.xueshubeijing" placeholder="学术背景"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item prop="lingyuzhuanzhang" label="领域专长">
								<el-input class="list_inp" v-model="userForm.lingyuzhuanzhang" placeholder="领域专长"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item prop="xiangmuleixing" label="可指导项目类型">
								<el-input class="list_inp" v-model="userForm.xiangmuleixing" placeholder="可指导项目类型"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item prop="zhidaoguoxiangmu" label="指导过项目">
								<el-input class="list_inp" v-model="userForm.zhidaoguoxiangmu" placeholder="指导过项目"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item prop="gongzuojingli" label="工作经历">
								<el-input class="list_inp" v-model="userForm.gongzuojingli" placeholder="工作经历"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item prop="youxiang" label="邮箱">
								<el-input class="list_inp" v-model="userForm.youxiang" placeholder="邮箱" readonly></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item prop="gerenjianjie" label="个人简介">
								<el-input class="personal-intro" type="textarea" :rows="4" v-model="userForm.gerenjianjie" placeholder="个人简介"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<div style="height: 20px; width: 100%; clear: both;"></div>
					<div class="formModel_btn_box">
						<el-button class="formModel_confirm" @click="updateSession" :loading="loading">更新信息</el-button>
						<el-button class="formModel_cancel" @click="loginout" type="danger" :disabled="loading">退出登录</el-button>
					</div>
				</el-form>
			</div>
			<div class="usersBox updatePassword" v-if="tabIndex=='updatePassword'">
				<el-form class="usersForm" ref="passwordFormRef" :model="passwordForm" label-width="120px"
					:rules="passwordRules">
					<el-form-item label="原密码" prop="mima">
						<el-input class="list_inp" v-model="passwordForm.mima" placeholder="请输入原密码"
							type="password"></el-input>
					</el-form-item>
					<el-form-item label="新密码" prop="newmima">
						<el-input class="list_inp" v-model="passwordForm.newmima" placeholder="请输入新密码"
							type="password"></el-input>
					</el-form-item>
					<el-form-item label="确认密码" prop="newmima2">
						<el-input class="list_inp" v-model="passwordForm.newmima2" placeholder="请再次输入新密码"
							type="password"></el-input>
					</el-form-item>
					<div class="formModel_btn_box">
						<el-button class="formModel_confirm" @click="updatePassword">修改密码</el-button>
					</div>
				</el-form>
			</div>
			<div class="usersBox friend" v-if="tabIndex=='friend'">
				<div v-if="!friendList.length && !loading" class="data-placeholder">
					<el-empty description="暂无好友或数据加载中" :image-size="100">
						<el-button @click="getFriendList">刷新列表</el-button>
					</el-empty>
				</div>
				
				<div class="friend-chat-container">
					<div class="friend-list">
						<!-- 好友列表 -->
						<div class="friend-items">
							<div class="section-content" v-for="item in friendList" :key="item.id"
								:class="{'active': item.id === currentFriend?.id}"
								@click.stop="chatClick(item)">
								<div class="friend-item">
									<div class="avatar">
										<img :src="item.picture?$config.url + item.picture:require('@/assets/avatar.png')" alt="">
									</div>
									<div class="info">
										<div class="name">{{item.name}}</div>
										<div class="status" v-if="item.type==0">[好友申请]</div>
									</div>
									<div class="actions" v-if="item.type==0">
										<el-button @click.stop="confirmFriend(item)" size="small" type="success">同意</el-button>
										<el-button @click.stop="cancelFriend(item)" size="small" type="danger">拒绝</el-button>
									</div>
								</div>
							</div>
							<div class="noList" v-if="!friendList.length">
								暂无好友
							</div>
						</div>
					</div>
					<div class="chat-container" v-if="currentFriend">
						<div class="chat-header">
							<span>{{nowname}}</span>
						</div>
						<div class="chat-content" id="chat-content">
							<div v-bind:key="item.id" v-for="item in chatList">
								<div v-if="item.uid==userForm.id" class="right-content">
									<div class="message-content">
										<el-alert v-if="item.format==1" class="text-content" :title="item.content" :closable="false"
												type="warning"></el-alert>
										<div v-else-if="item.fileType === 'image'" class="image-content">
											<img :src="$config.url + item.content" @click="previewImage($config.url + item.content)" />
										</div>
										<div v-else-if="item.fileType === 'file'" class="file-content" @click="downloadFile(item.content)">
											<i class="el-icon-document file-icon"></i>
											<div class="file-info">
												<div class="file-name">{{item.fileName || '文件'}}</div>
												<div class="file-size">{{item.fileSize ? formatFileSize(item.fileSize) : ''}}</div>
											</div>
										</div>
									</div>
									<div class="avatar">
										<img :src="mypic?$config.url + mypic:require('@/assets/avatar.png')" alt="" />
									</div>
								</div>
								<div v-else class="left-content">
									<div class="avatar">
										<img :src="nowfpic?$config.url + nowfpic:require('@/assets/avatar.png')" alt="" />
									</div>
									<div class="message-content">
										<el-alert v-if="item.format==1" class="text-content" :title="item.content" :closable="false"
												type="success"></el-alert>
										<div v-else-if="item.fileType === 'image'" class="image-content">
											<img :src="$config.url + item.content" @click="previewImage($config.url + item.content)" />
										</div>
										<div v-else-if="item.fileType === 'file'" class="file-content" @click="downloadFile(item.content)">
											<i class="el-icon-document file-icon"></i>
											<div class="file-info">
												<div class="file-name">{{item.fileName || '文件'}}</div>
												<div class="file-size">{{item.fileSize ? formatFileSize(item.fileSize) : ''}}</div>
											</div>
										</div>
									</div>
								</div>
								<div class="clear-float"></div>
							</div>
						</div>
						<div class="chat-footer">
							<div class="input-area">
								<el-input
									v-model="chatForm.content"
									type="textarea"
									:rows="3"
									placeholder="请输入消息"
									@keydown.enter.native.prevent="addChat"
								/>
							</div>
							<div class="action-bar">
								<el-upload 
									class="upload-btn" 
									:action="uploadUrl" 
									:on-success="handleUploadSuccess"
									:on-error="handleUploadError"
									:before-upload="beforeUpload"
									:headers="uploadHeaders"
									:show-file-list="false"
									name="file">
									<el-button type="primary">
										<i class="el-icon-plus"></i>
										上传文件
									</el-button>
								</el-upload>
								<el-button :disabled="!chatForm.content" type="primary" @click="addChat">发送</el-button>
							</div>
						</div>
					</div>
					<div class="chat-placeholder" v-else>
						<div class="placeholder-content">
							<i class="el-icon-chat-dot-square"></i>
							<p>选择一个好友开始聊天</p>
						</div>
					</div>
				</div>
			</div>
			<div class="usersBox chatRecord" v-if="tabIndex=='chat'">
				<div v-if="!recordList.length && !loading" class="data-placeholder">
					<el-empty description="暂无聊天记录或数据加载中" :image-size="100">
						<el-button @click="getRecordList">刷新列表</el-button>
					</el-empty>
				</div>
				
				<div class="z-box" :style='{"width":"70%","padding":"20px","margin":"0 auto"}'>
					<div class="section-content" v-for="item in recordList" :key="item.id" @click="chatClick(item)">
						<img :src="item.picture?$config.url + item.picture:require('@/assets/avatar.png')" style="width: 60px;border-radius: 50%;"
							 alt="">
						<div style="margin: 0 0 0 10px;display: flex;flex-direction: column;align-items: flex-start;">
							<div :style='{"fontSize":"14px","color":"#000","flex":"1","fontWeight":"bold"}'
								 class="item-style">{{item.name}}</div>
							<div :style='{"color":"#666","flex":"1","fontSize":"14px","lineHeight":"1.5","display":"flex","alignItems":"center"}'
								 class="item-style">
								<div v-if="item.notreadnum" style="padding: 0 5px;height: 16px;border-radius: 50%;text-align: center;line-height: 16px;font-size: 12px;background: #f00;color:#fff;width: auto;margin: 0 2px 0 0">{{item.notreadnum}}</div>
								{{item.content.split('/').length>1&&item.content.split('/')[0]=='upload'?'[图片]':item.content}}
							</div>
						</div>
					</div>
					<div class="noList" v-if="!recordList.length">
						暂无聊天记录
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
	import {
		ElMessageBox,
		ElLoading
	} from 'element-plus'
	import { Loading } from '@element-plus/icons-vue'
	import moment from 'moment'
	import {
		ref,
		getCurrentInstance,
		watch,
		onUnmounted,
		onMounted,
		computed,
		nextTick,
		reactive
	} from 'vue';
	import {
		useRoute,
		useRouter
	} from 'vue-router';
	import { useStore } from 'vuex'
	const store = useStore()
	import menu from '@/utils/menu'
	const context = getCurrentInstance()?.appContext.config.globalProperties;
	const route = useRoute()
	const router = useRouter()
	
	// 格式化文件大小的函数
	const formatFileSize = (bytes) => {
		if (!bytes) return '0 B'
		const k = 1024
		const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
		const i = Math.floor(Math.log(bytes) / Math.log(k))
		return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
	}
	
	//基础信息
	const tableName = 'daoshi'
	const formName = '导师个人中心'
	
	//基础信息
	const uploadUrl = computed(() => {
		return `${context.$config.url}file/upload`
	})
	//个人信息
	const userFormRef = ref(null)
	const userForm = ref({})
	const xuehaoLabel = computed(() => {
		return userForm.value.shifoubiye === '是' ? '账号' : '学号'
	})
	
	// 添加缓存和加载状态控制
	const loading = ref(false)
	const dataCache = reactive({
		userData: null,
		lastFetchTime: 0,
		friendList: null,
		recordList: null,
		cacheDuration: 5 * 60 * 1000 // 5分钟缓存时间
	})
	
	// 防抖函数
	const debounce = (fn, delay) => {
		let timer = null
		return function(...args) {
			if (timer) clearTimeout(timer)
			timer = setTimeout(() => {
				fn.apply(this, args)
			}, delay)
		}
	}
	
	// 刷新用户数据的函数
	const refreshUserData = () => {
		// 清除缓存
		dataCache.userData = null
		dataCache.lastFetchTime = 0
		// 重新获取数据
		getSession()
	}
	
	// 优化后的getSession函数
	const getSession = () => {
		// 检查缓存是否有效
		const now = Date.now()
		if (dataCache.userData && (now - dataCache.lastFetchTime < dataCache.cacheDuration)) {
			console.log('使用缓存的用户数据')
			userForm.value = dataCache.userData
			return Promise.resolve(dataCache.userData)
		}
		
		// 显示加载状态
		loading.value = true
		
		return context?.$http({
			url: `${context?.$toolUtil.storageGet('frontSessionTable')}/session`,
			method:'get',
			timeout: 10000 // 设置超时时间
		}).then(res => {
			loading.value = false
			if (res.data && res.data.code === 0) {
				context?.$toolUtil.storageSet('userid', res.data.data.id)
				context?.$toolUtil.storageSet("frontName", res.data.data.daoshigonghao)
				context?.$toolUtil.storageSet('headportrait', res.data.data.touxiang)
				
				// 更新用户数据
				userForm.value = res.data.data
				
				// 确保邮箱字段填充
				if (res.data.data.youxiang) {
					userForm.value.youxiang = res.data.data.youxiang
				}
				
				// 更新缓存
				dataCache.userData = res.data.data
				dataCache.lastFetchTime = now
				
				return res.data.data
			}
			return null
		}).catch(err => {
			loading.value = false
			console.error('获取用户数据失败:', err)
			context?.$toolUtil.message('获取用户数据失败，请稍后重试', 'error')
			return null
		})
	}
	
	// 优化的更新函数
	const updateSession = debounce(() => {
		userFormRef.value.validate((valid) => {
			if(valid) {
				loading.value = true
				
				// 处理头像URL
				if(userForm.value.touxiang != null) {
					userForm.value.touxiang = userForm.value.touxiang.replace(new RegExp(context?.$config.url,"g"),"");
				}
				
				store.dispatch('user/update', userForm.value).then(res => {
					loading.value = false
					if(res?.data && res.data.code == 0) {
						context?.$toolUtil.message('更新成功', 'success')
						
						// 清除缓存，强制重新加载
						dataCache.userData = null
						dataCache.lastFetchTime = 0
						
						getSession()
					}
				}).catch(err => {
					loading.value = false
					console.error('更新用户数据失败:', err)
					context?.$toolUtil.message('更新失败，请稍后重试', 'error')
				})
			}
		})
	}, 300)
	
	//修改密码
	const passwordFormRef = ref(null)
	const passwordForm = ref({
		mima: '',
		newmima: '',
		newmima2: ''
	})
	const passwordRules = ref({
		mima: [{
			required: true,
			message: '请输入',
			trigger: 'blur'
		}, ],
		newmima: [{
			required: true,
			message: '请输入',
			trigger: 'blur'
		}, ],
		newmima2: [{
			required: true,
			message: '请输入',
			trigger: 'blur'
		}, ],
	})
	
	// 修改密码
	const updatePassword = async () => {
		passwordFormRef.value.validate(async (valid) => {
			if (valid) {
				if(passwordForm.value.mima != userForm.value.mima){
					context?.$toolUtil.message('原密码不正确', 'error')
					return false
				}
				if(passwordForm.value.newmima != passwordForm.value.newmima2){
					context?.$toolUtil.message('两次密码输入不正确', 'error')
					return false
				}
				
				loading.value = true
				userForm.value.mima = passwordForm.value.newmima
				
				store.dispatch('user/update', userForm.value).then(res => {
					loading.value = false
					if(res?.data && res.data.code == 0) {
						context?.$toolUtil.message('更新成功', 'success')
						passwordForm.value = {
							mima: '',
							newmima: '',
							newmima2: ''
						}
						// 清除缓存
						dataCache.userData = null
						dataCache.lastFetchTime = 0
						getSession()
					}
				}).catch(err => {
					loading.value = false
					context?.$toolUtil.message('密码更新失败，请稍后重试', 'error')
				})
			}
		})
	}
	
	//验证规则
	//匹配整数
	const validateIntNumber = (rule, value, callback) => {
		if (!value) {
			callback();
		} else if (!context?.$toolUtil.isIntNumer(value)) {
			callback(new Error("请输入整数"));
		} else {
			callback();
		}
	}
	//匹配数字
	const validateNumber = (rule, value, callback) => {
		if(!value){
			callback();
		} else if (!context?.$toolUtil.isNumber(value)) {
			callback(new Error("请输入数字"));
		} else {
			callback();
		}
	}
	//匹配手机号码
	const validateMobile = (rule, value, callback) => {
		if(!value){
			callback();
		} else if (!context?.$toolUtil.isMobile(value)) {
			callback(new Error("请输入正确的手机号码"));
		} else {
			callback();
		}
	}
	//匹配电话号码
	const validatePhone = (rule, value, callback) => {
		if(!value){
			callback();
		} else if (!context?.$toolUtil.isPhone(value)) {
			callback(new Error("请输入正确的电话号码"));
		} else {
			callback();
		}
	}
	//匹配邮箱
	const validateEmail = (rule, value, callback) => {
		if(!value){
			callback();
		} else if (!context?.$toolUtil.isEmail(value)) {
			callback(new Error("请输入正确的邮箱地址"));
		} else {
			callback();
		}
	}
	//匹配身份证
	const validateIdCard = (rule, value, callback) => {
		if(!value){
			callback();
		} else if (!context?.$toolUtil.checkIdCard(value)) {
			callback(new Error("请输入正确的身份证号码"));
		} else {
			callback();
		}
	}
	//匹配网站地址
	const validateUrl = (rule, value, callback) => {
		if(!value){
			callback();
		} else if (!context?.$toolUtil.isURL(value)) {
			callback(new Error("请输入正确的URL地址"));
		} else {
			callback();
		}
	}
	const rules = ref({
		// ... 保持原有规则不变
	})
	
	//菜单跳转
	const tabIndex = ref('center')
	const tabClick = (item) => {
		if (item.tableName == 'center') {
			tabIndex.value = 'center'
			return
		}
		if (item.tableName == 'updatePassword') {
			passwordForm.value = {
				mima: '',
				newmima: '',
				newmima2: ''
			}
			tabIndex.value = 'updatePassword'
			return
		}
		if (item.tableName == 'friend') {
			getFriendList()
			tabIndex.value = 'friend'
			return
		}
		if (item.tableName == 'chat') {
			getRecordList()
			tabIndex.value = 'chat'
			return
		}
		if(item.tableName=='examrecord'&&item.menuJump=='22'){
			router.push(`/index/examfailrecord?centerType=1`)
			return
		}
		if(item.tableName=='forum'&&item.menuJump=='14'){
			router.push(`/index/forumList?centerType=1&&myType=1`)
			return
		}
        if(item.tableName=='storeup'){
            router.push(`/index/storeupList?centerType=1&&type=${item.type}`)
            return;
        }
        router.push(`/index/${item.classname||item.tableName}List?centerType=1${item.menuJump?'&menuJump='+item.menuJump:''}`)
	}
	
	//菜单
	const menuList = ref([])
	const role = ref('')
	//性别列表
	const xingbieLists = ref([])
	//学历列表
	const xueliLists = ref([])
	//是否毕业列表
	const shifoubiyeLists = ref([])
	//项目负责人列表
	const xiangmufuzerenLists = ref([])
	//头像上传回调
	const touxiangUploadSuccess=(e)=>{
		userForm.value.touxiang = e
	}
	//类型列表
	const leixingLists = ref([])
	//城市列表
	const chengshiLists = ref([])
	//园区列表
	const yuanquLists = ref([])
	//街道列表
	const jiedaoLists = ref([])
	
	// 优化的好友列表获取函数
	const getFriendList = () => {
		// 检查缓存
		if (dataCache.friendList && (Date.now() - dataCache.lastFetchTime < dataCache.cacheDuration)) {
			console.log('使用缓存的好友列表')
			friendList.value = dataCache.friendList
			return
		}
		
		loading.value = true
		
		context.$http.get('chatfriend/page', {
			params: {
				uid: Number(localStorage.getItem('userid'))
			},
			timeout: 8000
		}).then(res => {
			loading.value = false
			if (res.data && res.data.code == 0) {
				res.data.data.list.sort(function (a, b) {
					return (a.type - b.type)
				});
				let arr = []
				for (let x in res.data.data.list) {
					if (res.data.data.list[x].type != 2) {
						arr.push(res.data.data.list[x])
					}
				}
				friendList.value = arr
				
				// 更新缓存
				dataCache.friendList = arr
			}
		}).catch(err => {
			loading.value = false
			console.error('获取好友列表失败:', err)
			context?.$toolUtil.message('获取好友列表失败，请稍后重试', 'error')
		})
	}
	
	// 优化的聊天记录获取函数
	const getRecordList = () => {
		// 检查缓存
		if (dataCache.recordList && (Date.now() - dataCache.lastFetchTime < dataCache.cacheDuration / 2)) { // 聊天记录缓存时间更短
			console.log('使用缓存的聊天记录')
			recordList.value = dataCache.recordList
			return
		}
		
		loading.value = true
		
		context.$http.get('chatfriend/page2', {
			params: {
				uid: Number(localStorage.getItem('userid')),
				type: 2
			},
			timeout: 8000
		}).then(res => {
			loading.value = false
			if (res.data && res.data.code == 0) {
				recordList.value = res.data.data.list
				
				// 更新缓存
				dataCache.recordList = res.data.data.list
			}
		}).catch(err => {
			loading.value = false
			console.error('获取聊天记录失败:', err)
			context?.$toolUtil.message('获取聊天记录失败，请稍后重试', 'error')
		})
	}
	
	//初始化
	const init = () => {
		const menus = menu.list()
		let arr = []
		if (menus) {
			menuList.value = menus
		}
		role.value = context?.$toolUtil.storageGet('frontRole')
		for (let i = 0; i < menuList.value.length; i++) {
			if (menuList.value[i].roleName == role.value) {
				arr = menuList.value[i].backMenu
				break;
			}
		}
		menuList.value = arr
		xingbieLists.value = "男,女".split(',')
		leixingLists.value = "校内导师,校外导师".split(',')
		context?.$http({
			url: `option/chengshi/chengshi`,
			method: 'get'
		}).then(res=>{
			chengshiLists.value = res.data.data
		})
		getSession()
	}
    // 多级联动参数
	const change1 = (e,conditionColumn)=>{
		userForm.value.yuanqu = '';
        yuanquLists.value = [];
		userForm.value.jiedao = '';
        jiedaoLists.value = [];
		context?.$http({
			url: `option/yuanqu/yuanqu?conditionColumn=${conditionColumn}&conditionValue=${e}`,
			method: 'get'
		}).then(res=>{
			yuanquLists.value = res.data.data
		})
	}

    // 多级联动参数
	const change2 = (e,conditionColumn)=>{
		userForm.value.jiedao = '';
        jiedaoLists.value = [];
		context?.$http({
			url: `option/jiedao/jiedao?conditionColumn=${conditionColumn}&conditionValue=${e}`,
			method: 'get'
		}).then(res=>{
			jiedaoLists.value = res.data.data
		})
	}
	//菜单悬浮的显示与隐藏
	const usersTabIndex = ref(-1)
	const usersTabHover = (index) => {
		usersTabIndex.value = index
	}
	const usersTabLeave = () => {
		usersTabIndex.value = -1
	}
	//富文本
	const editorChange = (e,name) =>{
		userForm.value[name] = e
	}
	
	//退出登录
	const loginout = () => {
		context?.$toolUtil.message('退出成功', 'success')
		context?.$toolUtil.storageClear()
		router.replace('/index/home')
	}
	
	const recordList = ref([])
	const chatVisible = ref(false)
	const nowfid = ref(0)
	const nowfpic = ref('')
	const nowname = ref('')
	const mypic = ref(localStorage.getItem('headportrait'))
	const chatList = ref([])
	const chatForm = ref({
		content: ''
	})
	const chatTimer = ref(null)
    const nowtablename = ref('')
    const friendList = ref([])
    const searchText = ref('')
    const currentFriend = ref(null)
    
    const confirmFriend = (item) => {
        ElMessageBox.confirm('是否同意好友申请？')
            .then(_ => {
                loading.value = true
                context.$http.post('chatfriend/add', {
                    uid: item.fid,
                    fid: Number(localStorage.getItem('userid')),
                    type: 1,
                    tablename: localStorage.getItem('frontSessionTable'),
                    name: localStorage.getItem('frontName'),
                    picture: localStorage.getItem('headportrait'),
                }).then(res => {
                    context.$http.post('chatfriend/add', {
                        uid: Number(localStorage.getItem('userid')),
                        fid: item.fid,
                        type: 1,
                        tablename: item.tablename,
                        name: item.name,
                        picture: item.picture,
                    }).then(res1 => {
                        context.$http.post('chatfriend/delete', [item.id]).then(res2 => {
                            loading.value = false
                            if (res2.data && res2.data.code == 0) {
                                context.$toolUtil.message('添加好友成功','success');
                                // 清除缓存
                                dataCache.friendList = null
                                getFriendList()
                            }
                        })
                    })
                }).catch(() => {
                    loading.value = false
                })
            }).catch(_ => {
        });
    }
    
    const cancelFriend = (item) => {
        ElMessageBox.confirm('是否拒绝此好友申请？').then(_ => {
            loading.value = true
            context.$http.post('chatfriend/delete', [item.id]).then(res2 => {
                loading.value = false
                if (res2.data && res2.data.code == 0) {
                    context.$toolUtil.message('操作成功！','success');
                    // 清除缓存
                    dataCache.friendList = null
                    getFriendList()
                }
            }).catch(() => {
                loading.value = false
            })
        }).catch(_ => {
        });
    }
    
	const chatClick = (row) => {
		if (row.type == 0) {
			return false
		}
		nowtablename.value = row.tablename
		nowfid.value = row.fid
		nowfpic.value = row.picture
		nowname.value = row.name
		currentFriend.value = row
		getChatList()
	}
    
    const scrollFlag = ref(true)
    
	// 优化的聊天消息获取函数
	const getChatList = () => {
		context.$http.get('chatmessage/mlist', {
			params: {
				page: 1,
				limit: 1000,
				uid: Number(localStorage.getItem('userid')),
				fid: nowfid.value
			},
			timeout: 8000
		}).then(res => {
			if (res.data && res.data.code == 0) {
				chatList.value = res.data.data.list.map(item => {
					if (item.format === 2) {
						// 检查文件类型
						if (item.content) {
							const fileName = item.content.toLowerCase();
							if (fileName.match(/\.(jpg|jpeg|png|gif|webp)$/)) {
								item.fileType = 'image';
							} else {
								item.fileType = 'file';
							}
						}
					}
					return item;
				});

				let div = document.getElementsByClassName('chat-content')[0]
				setTimeout(() => {
					if (div) {
						if (div.scrollTop + div.clientHeight == div.scrollHeight || scrollFlag.value) {
							div.scrollTop = div.scrollHeight
							scrollFlag.value = false
						}
					}
				}, 0)
				
				// 使用更长的轮询间隔
				chatTimer.value = setTimeout(() => {
					getChatList()
				}, 8000) // 增加到8秒
			}
		}).catch(err => {
			console.error('获取聊天消息失败:', err)
			// 出错时也要继续轮询，但间隔更长
			chatTimer.value = setTimeout(() => {
				getChatList()
			}, 15000) // 出错后15秒再试
		})
	}
	
	const clearChat = () => {
		clearTimeout(chatTimer.value)
		chatList.value = []
		currentFriend.value = null
		getRecordList()
	}
	
	const uploadHeaders = computed(() => {
		return {
			'Token': localStorage.getItem('token') || '',
		}
	})

	// 修改上传配置
	const uploadConfig = {
		// 添加上传配置
		withCredentials: true, // 允许发送cookie
		timeout: 60000, // 设置超时时间
	}

	// 上传前检查
	const beforeUpload = (file) => {
		const maxSize = 100 * 1024 * 1024; // 100MB
		if (file.size > maxSize) {
			context.$toolUtil.message('文件大小不能超过100MB', 'error')
			return false
		}
		return true
	}

	// 修改错误处理函数
	const handleUploadError = (error, file) => {
		console.error('Upload error:', error)
		let errorMessage = '文件上传失败，请重试'
		
		if (error.status === 0) {
			errorMessage = '网络连接失败，请检查网络设置'
		} else if (error.response) {
			errorMessage = error.response.data?.msg || '上传失败，服务器响应异常'
		}
		
		context.$toolUtil.message(errorMessage, 'error')
	}

	// 修改上传成功处理函数
	const handleUploadSuccess = (response, file) => {
		console.log('Upload response:', response) // 添加调试日志
		try {
			if (response.code == 0) {
				clearTimeout(chatTimer.value)
				if (!chatList.value.length) {
					context.$http.post('chatfriend/add', {
						uid: Number(localStorage.getItem('userid')),
						fid: nowfid.value,
						name: nowname.value,
						picture: nowfpic.value,
						type: 2,
						tablename: nowtablename.value
					}).then(res => {
						context.$http.post('chatfriend/add', {
							uid: nowfid.value,
							fid: Number(localStorage.getItem('userid')),
							type: 2,
							tablename: localStorage.getItem('frontSessionTable'),
							name: localStorage.getItem('frontName'),
							picture: mypic.value,
						})
					})
				}

				// 判断文件类型
				const fileName = file.name.toLowerCase();
				const isImage = fileName.match(/\.(jpg|jpeg|png|gif|webp)$/);
				
				context.$http.post('chatmessage/add', {
					uid: Number(localStorage.getItem('userid')),
					fid: nowfid.value,
					content: 'file/' + response.file,
					format: 2,
					fileType: isImage ? 'image' : 'file',
					fileName: file.name,
					fileSize: file.size
				}).then(res2 => {
					chatForm.value = {
						content: ''
					}
					scrollFlag.value = true
					getChatList()
					context.$toolUtil.message('文件上传成功', 'success')
				})
			} else {
				throw new Error(response.msg || '上传失败')
			}
		} catch (err) {
			console.error('Upload success handler error:', err)
			context.$toolUtil.message(err.message || '处理上传响应失败', 'error')
		}
	}

	const previewImage = (url) => {
		const preview = document.createElement('div');
		preview.className = 'image-preview';
		preview.innerHTML = `<img src="${url}" />`;
		document.body.appendChild(preview);
		
		preview.onclick = () => {
			document.body.removeChild(preview);
		};
	}
	
	const downloadFile = (url) => {
		const fullUrl = context.$config.url + url;
		const link = document.createElement('a');
		link.href = fullUrl;
		link.target = '_blank';
		document.body.appendChild(link);
		link.click();
		document.body.removeChild(link);
	}
	
	const addChat = () => {
		clearTimeout(chatTimer.value)
        if (!chatList.value.length) {
            context.$http.post('chatfriend/add', {
                uid: Number(localStorage.getItem('userid')),
                fid: nowfid.value,
                name: nowname.value,
                picture: nowfpic.value,
                type: 2,
                tablename: nowtablename.value
            }).then(res => {
                context.$http.post('chatfriend/add', {
                    uid: nowfid.value,
                    fid: Number(localStorage.getItem('userid')),
                    type: 2,
                    tablename: localStorage.getItem('frontSessionTable'),
                    name: localStorage.getItem('frontName'),
                    picture: mypic.value,
                }).then(res1 => {

                })
            })
        }
		context.$http.post('chatmessage/add', {
			uid: Number(localStorage.getItem('userid')),
			fid: nowfid.value,
			content: chatForm.value.content,
			format: 1
		}).then(res2 => {
			chatForm.value = {
				content: ''
			}
            scrollFlag.value = true
			getChatList()
		})
	}
	
	// 添加加载指示器组件
	onMounted(() => {
		init()
		
		// 预加载常用数据
		nextTick(() => {
			// 预加载好友列表数据
			if (tabIndex.value !== 'friend' && tabIndex.value !== 'chat') {
				setTimeout(() => {
					getFriendList()
				}, 2000) // 延迟2秒预加载
			}
		})
	})

	// 在组件卸载时清理资源
	onUnmounted(() => {
		if (chatTimer.value) {
			clearTimeout(chatTimer.value)
		}
	})
	
	// 新增homeClick方法
	const homeClick = () => {
		router.push('/index/home')
	}
</script>

<style lang="scss" scoped>
	// 全局加载指示器样式
	.global-loading-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(255, 255, 255, 0.7);
		z-index: 9999;
		display: flex;
		justify-content: center;
		align-items: center;
		
		.loading-spinner {
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: rgba(0, 0, 0, 0.7);
			padding: 20px;
			border-radius: 8px;
			
			.is-loading {
				font-size: 32px;
				color: #fff;
				margin-bottom: 10px;
			}
			
			span {
				color: #fff;
				font-size: 14px;
			}
		}
	}
	
	// 数据占位符样式
	.data-placeholder {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 300px;
		
		:deep(.el-empty__image) {
			width: 100px;
			height: 100px;
		}
		
		:deep(.el-empty__description) {
			margin-top: 15px;
			font-size: 14px;
			color: #909399;
		}
		
		:deep(.el-button) {
			margin-top: 15px;
		}
	}

	// Style for readonly/disabled fields - gray text instead of gray background
	:deep(.el-input.is-disabled .el-input__inner),
	:deep(.el-input.is-disabled .el-input__inner:focus),
	:deep(.el-input.is-disabled .el-input__inner:hover),
	:deep(.el-input.is-readonly .el-input__inner),
	:deep(.el-input.is-readonly .el-input__inner:focus),
	:deep(.el-input.is-readonly .el-input__inner:hover) {
		color: #999 !important;
		background-color: transparent !important;
		border-color: #ddd !important;
	}

	:deep(.el-select.is-disabled .el-input__inner),
	:deep(.el-select.is-disabled .el-input__inner:focus),
	:deep(.el-select.is-disabled .el-input__inner:hover) {
		color: #999 !important;
		background-color: transparent !important;
		border-color: #ddd !important;
	}

	.usersView {
		.usersTabView {

			.usersTab {

				.usersTabHoverView {
					.usersTabHoverTab {
					}
					.usersTabHoverTab:hover {
					}
				}
			}
			.usersTab:hover {
			}
			.usersTabActive {
			}
		}

		.usersBox {
			.usersForm {
				// form item
				:deep(.el-form-item) {
					//label
					.el-form-item__label {
					}
					// 内容盒子
					.el-form-item__content {
						// 输入框
						.list_inp {
						}
						// 下拉框
						.list_sel {
							//去掉默认样式
							.select-trigger{
								height: 100%;
								.el-input{
									height: 100%;
								}
							}
						}
						//图片上传样式
						.el-upload-list  {
							//提示语
							.el-upload__tip {
							}
							//外部盒子
							.el-upload--picture-card {
								//图标
								.el-icon{
								}
							}
							.el-upload-list__item {
							}
						}
					}
				}
			}
		}
		// 按钮盒子
		.formModel_btn_box {
			.formModel_cancel {
			}
			.formModel_cancel:hover {
			}
		
			.formModel_confirm {
			}
			.formModel_confirm:hover {
			}
		}
	}
	.section-content {
		cursor: pointer;
		padding: 20px;
		box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
		margin: 0 0 20px;
		color: #333;
		background: #fff;
		display: flex;
		width: 100%;
		border-color: #efefef;
		border-width: 0;
		align-items: center;
		position: relative;
	}

	.section-content:hover {
		color: #fff;
		background: #DF847F10;
	}
	.chat-content {
		padding-bottom: 20px;
		width: 100%;
		margin-bottom: 10px;
		max-height: 300000000px;
		height: 300px;
		overflow-y: scroll;
		border: 1px solid #eeeeee;
		background: #fff;

		.left-content {
			float: left;
			margin-bottom: 10px;
			padding: 10px;
			max-width: 80%;
			display: flex;
			align-items: center;
		}

		.right-content {
			float: right;
			margin-bottom: 10px;
			padding: 10px;
			max-width: 80%;
			display: flex;
			align-items: center;
		}
	}

	.clear-float {
		clear: both;
	}
	.noList {
		color: #9e9e9e;
		width: 100%;
		text-align: center;
		padding: 60px 0;
	}

	.friend-chat-container {
		display: flex;
		width: 100%;
		height: 700px;
		background: #f5f5f5;
		border: 1px solid #e0e0e0;
	}

	.friend-list {
		width: 280px;
		height: 100%;
		background: #fff;
		border-right: 1px solid #e0e0e0;
		display: flex;
		flex-direction: column;

		.friend-items {
			flex: 1;
			overflow-y: auto;
			padding: 0;

			.section-content {
				padding: 10px;
				margin: 0;
				border-bottom: 1px solid #f0f0f0;

				&:hover, &.active {
					background: #f0f0f0;
				}
			}
		}
	}

	.friend-item {
		display: flex;
		align-items: center;

		.avatar {
			width: 40px;
			height: 40px;
			margin-right: 10px;

			img {
				width: 100%;
				height: 100%;
				border-radius: 3px;
				object-fit: cover;
			}
		}

		.info {
			flex: 1;

			.name {
				font-size: 14px;
				color: #333;
				margin-bottom: 3px;
			}

			.status {
				font-size: 12px;
				color: #999;
			}
		}

		.actions {
			.el-button {
				padding: 5px 10px;
				margin-left: 5px;
			}
		}
	}

	.chat-container {
		flex: 1;
		display: flex;
		flex-direction: column;
		background: #f5f5f5;

		.chat-header {
			height: 50px;
			padding: 0 20px;
			background: #fff;
			border-bottom: 1px solid #e0e0e0;
			display: flex;
			align-items: center;
			font-size: 16px;
			color: #333;
		}

		.chat-content {
			flex: 1;
			padding: 20px;
			overflow-y: auto;

			.left-content, .right-content {
				display: flex;
				align-items: flex-start;
				margin-bottom: 20px;
				
				.avatar {
					width: 40px;
					height: 40px;
					img {
						width: 100%;
						height: 100%;
						border-radius: 3px;
					}
				}

				.message-content {
					max-width: 60%;
					margin: 0 10px;
					
					.text-content {
						margin: 0;
						background: #fff;
						border: none;
						border-radius: 3px;
						padding: 10px;
						box-shadow: 0 1px 2px rgba(0,0,0,0.1);
					}

					.image-content {
						img {
							max-width: 200px;
							max-height: 200px;
							border-radius: 3px;
							cursor: pointer;
						}
					}

					.file-content {
						background: #fff;
						border-radius: 3px;
						padding: 10px;
						box-shadow: 0 1px 2px rgba(0,0,0,0.1);
						display: flex;
						align-items: center;
						cursor: pointer;

						.file-icon {
							font-size: 24px;
							margin-right: 10px;
							color: #409EFF;
						}

						.file-info {
							flex: 1;
							overflow: hidden;

							.file-name {
								font-size: 14px;
								color: #333;
								margin-bottom: 2px;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.file-size {
								font-size: 12px;
								color: #999;
							}
						}
					}
				}
			}

			.right-content {
				.message-content {
					.text-content {
						background: #95EC69;
					}

					.file-content {
						background: #95EC69;
					}
				}
			}
		}

		.chat-footer {
			background: #fff;
			border-top: 1px solid #e0e0e0;
			padding: 10px;

			.input-area {
				padding: 10px;
				
				.el-textarea {
					textarea {
						resize: none;
						border: none;
						padding: 0;
						
						&:focus {
							box-shadow: none;
						}
					}
				}
			}

			.action-bar {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding: 0 10px 10px;

				.upload-btn {
					margin-right: 10px;
					
					:deep(.el-upload) {
						display: block;
					}

					.el-button {
						display: flex;
						align-items: center;
						padding: 10px 15px;
						
						i {
							margin-right: 5px;
							font-size: 16px;
						}
					}
				}

				.el-button {
					padding: 10px 20px;
				}
			}
		}
	}

	.chat-placeholder {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #f5f5f5;

		.placeholder-content {
			text-align: center;
			color: #999;

			i {
				font-size: 48px;
				margin-bottom: 10px;
			}

			p {
				margin: 0;
				font-size: 14px;
			}
		}
	}

	.image-preview {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,0.9);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999;

		img {
			max-width: 90%;
			max-height: 90%;
			object-fit: contain;
		}
	}

	.updatePassword {
		.usersForm {
			width: 100%;
			max-width: 500px;
			margin: 0 auto;
			padding: 30px;

			.el-form-item {
				margin-bottom: 20px;
				display: block !important;

				.el-form-item__label {
					float: none;
					display: block;
					text-align: left;
					padding: 0 0 10px;
					line-height: 1;
					color: #333;
				}

				.el-form-item__content {
					margin-left: 0 !important;
					display: block;

					.list_inp {
						width: 100%;
						height: 40px;
						line-height: 40px;
						border: 1px solid #ddd;
						border-radius: 4px;
						padding: 0 15px;
						font-size: 14px;

						&:focus {
							border-color: #409EFF;
						}
					}
				}
			}

			.formModel_btn_box {
				margin-top: 30px;
				text-align: center;

				.formModel_confirm {
					width: 120px;
					height: 40px;
					font-size: 14px;
				}
			}
		}
	}
</style>
<style>
/**总盒子**/
.center_view {
    width: 1200px;
    margin: 20px auto;
    padding: 40px 20px 20px ;
    background: #fff;
    overflow: hidden;
    font-size: 16px;
}
/**标题**/
.center_view .section_title{
    background: none !important;
    background-size: 100% 100%;
    width: 100%;
    font-size: 36px;
    color: #023F7A;
    line-height: 54px;
    padding-left: 40px;
    height: 60px;
}

/**内容区**/
.center_view .usersView{
    display: flex;
    width: 100%;
    margin: 20px auto;
}

/**tab总盒子**/
.center_view .usersView .usersTabView{
    width: 200px;
    background: #fff;
    padding: 0;
    box-sizing: border-box;
    border: none;
}
/**item**/
.center_view .usersView .usersTabView .usersTab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: 16px;
    padding: 15px 20px;
    position: relative;
    cursor: pointer;
    text-align: center;
    background: #fff;
    color: rgb(51, 51, 51);
    margin-bottom: 0;
    border: none;
    border-bottom: 1px solid #000;
    box-sizing: border-box;
    border: 1px solid transparent;
    transition: border 0.2s, background 0.2s, color 0.2s;
    padding-left: 18px; /* 为左侧粗线预留空间 */
    height: 48px;
    min-height: 48px;
}

.center_view .usersView .usersTabView .usersTab:last-child{
    border-bottom: none;
}

.center_view .usersView .usersTabView .usersTab.usersTabActive {
    background: linear-gradient(90deg, rgba(144,202,249,0.6) 0%, rgba(227,242,253,0) 100%);
    color: #1565c0;
    border-left: 6px solid #1565c0;
    border-radius: 0 4px 4px 0;
    font-weight: bold;
    box-shadow: none;
    z-index: 1;
}

.center_view .usersView .usersTabView .usersTab:not(.usersTabActive):hover {
    background: linear-gradient(90deg, rgba(144,202,249,0.6) 0%, rgba(227,242,253,0) 100%);
    color: #1565c0;
    border-left: 6px solid transparent;
    z-index: 0;
}

.center_view .usersView .usersTabView .usersTab.usersTabActive svg,
.center_view .usersView .usersTabView .usersTab.usersTabActive i {
    color: #1565c0 !important;
}
.center_view .usersView .usersTabView .usersTab:not(.usersTabActive):hover svg,
.center_view .usersView .usersTabView .usersTab:not(.usersTabActive):hover i {
    color: #1565c0 !important;
}

/**右部 总盒子**/
.center_view .usersView .usersBox{
    width: calc(100% - 220px);
    margin-left: 20px;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: none;
    border: 1px solid #eee;
}

/**form盒子**/
.center_view .usersView .usersBox .usersForm{
    width: 100%;
    padding: 30px;
}
.center_view .usersView .usersBox .usersForm .el-form-item{
    margin: 0px 0px 20px;
    display: flex;
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__label{
    width: 150px;
    background: none;
    text-align: right;
    display: block;
    font-size: 16px;
    color: rgb(51, 51, 51);
    font-weight: 500;
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    width: calc(100% - 120px);
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_inp{
    height: 36px;
    line-height: 36px;
    border: 1px solid rgb(221, 221, 221);
    padding: 0px 10px;
    width: 100%;
    box-sizing: border-box;
    background: rgb(255, 255, 255);
    font-size: 16px;
}

/**会员**/
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .vip_item{
    display: flex;
    align-items: center;
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .vip_item .vip_inp{
    height: 36px;
    line-height: 36px;
    border: 1px solid rgb(221, 221, 221);
    padding: 0px 10px;
    width: 80%;
    box-sizing: border-box;
    background: rgb(255, 255, 255);
    font-size: 16px;
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .vip_item .vip_btn{
    background: var(--theme);
    color: rgb(255, 255, 255);
    height: 36px;
    line-height: 36px;
    padding: 0px 20px;
    border-radius: 0px;
    margin: 0px 0px 0px 5px;
    border-color: var(--theme);
}
/**end**/

/**下拉选择**/
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_sel{
    line-height: 36px;
    border: 1px solid rgb(221, 221, 221);
    box-sizing: border-box;
    width: calc(100% - 120px);
    padding: 0px 10px;
    border-radius: 0px;
    background: rgb(255, 255, 255);
    font-size: 16px;
}
/**end**/

/**日期选择**/
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_date{
    line-height: 36px;
    border: 1px solid rgb(221, 221, 221);
    box-sizing: border-box;
    width: 100%;
    border-radius: 0px;
    background: rgb(255, 255, 255);
    font-size: 16px;
}
/**end**/

/**radio**/
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_radio{
    display: flex;
    width: calc(100% - 120px);
    align-items: center;
    flex-wrap: wrap;
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_radio .el-radio{
    width: 30%;
    margin: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_radio .el-radio .el-radio__inner{
    border-color: #999;
    background: #fff;
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_radio .el-radio .el-radio__label{
    color: #999;
    font-size: 16px;
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_radio .el-radio.is-checked .el-radio__inner{
    border-color: var(--theme);
    background: var(--theme);
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_radio .el-radio.is-checked .el-radio__label{
    color: var(--theme);
    font-size: 16px;
}
/**end**/

/**checkbox**/
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_checkbox{
    display: flex;
    width: calc(100% - 120px);
    flex-wrap: wrap;
    align-items: center;
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_checkbox .el-checkbox{
    width: 20%;
    margin: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_checkbox .el-checkbox .el-checkbox__inner{
    border-color: #999;
    background: #fff;
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_checkbox .el-checkbox .el-checkbox__label{
    color: #999;
    font-size: 16px;
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_checkbox .el-checkbox.is-checked .el-checkbox__inner{
    border-color: var(--theme);
    background: var(--theme);
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_checkbox .el-checkbox.is-checked .el-checkbox__label{
    color: var(--theme);
    font-size: 16px;
}
/**end**/

/**textarea**/
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_textarea{
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_textarea .el-textarea__inner{
    width: 100%;
    min-height: 150px;
    padding: 12px;
    border: 1px solid rgb(221, 221, 221);
    border-radius: 0px;
    color: #666;
    font-size: 16px;
}

/* 个人简介文本框样式 */
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .personal-intro {
    width: 100%;
    margin-bottom: 20px;
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .personal-intro .el-textarea__inner {
    width: 100%;
    height: 120px;
    max-height: 120px;
    padding: 12px;
    border: 1px solid rgb(221, 221, 221);
    border-radius: 4px;
    color: #333;
    font-size: 14px;
    resize: none;
    overflow-y: auto;
    box-shadow: none;
    transition: border-color 0.2s;
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .personal-intro .el-textarea__inner:focus {
    border-color: var(--theme);
}
/**end**/

/**图片上传**/
/* 盒子 */
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .el-upload--picture-card{
    background-color: rgb(255, 255, 255);
    width: 100px;
    height: 90px;
    line-height: 100px;
    text-align: center;
    border: 1px solid rgb(221, 221, 221);
    border-radius: 0px;
    cursor: pointer;
}
/* 图标 */
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .el-upload--picture-card .el-icon{
    font-size: 32px;
    color: #999;
}
/* 提示语 */
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .img-uploader .el-upload__tip{
    font-size: 15px;
    color: #666;
    margin: 0;
}
/**end**/

/**文件上传**/
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .el-upload--text .el-upload-dragger{
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(221, 221, 221);
    border-radius: 0px;
    box-sizing: border-box;
    width: 360px;
    height: 180px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
}
/* 图标 */
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .el-upload--text .el-upload-dragger .el-icon-upload{
    font-size: 67px;
    color: var(--theme);
    line-height: 50px;
}
/* 提示语 */
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .upload-demo .el-upload__tip{
    font-size: 15px;
    color: #666;
    margin: 0px 0 0;
    line-height:1;
}
/* 点击上传 */
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .el-upload--text .el-upload-dragger em{
    color: var(--theme);
    font-size: 15px;
}
/**end**/

/**富文本**/
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_editor{
    width: 100%;
    height: auto;
    margin: 0px;
    padding: 0px;
    border-radius: 0px;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(221, 221, 221);
    min-height: 300px;
}
/**end**/

/**按钮**/
.center_view .formModel_btn_box{
    display: flex;
    align-items: center;
    width: 100%;
    margin: 40px 0px 0px;
    justify-content: center;
}
/**更新信息**/
.center_view .formModel_btn_box .formModel_confirm{
    margin: 0px 20px 0px 0px;
    padding: 0px 24px;
    width: auto;
    height: 40px;
    font-size: 16px;
    color: rgb(255, 255, 255);
    border: 0px;
    cursor: pointer;
    background: var(--theme);
    border-radius: 6px;
}
.center_view .formModel_btn_box .formModel_confirm:hover{
    background: var(--theme);
}
/**退出登陆**/
.center_view .formModel_btn_box .formModel_cancel{
    margin: 0px 20px 0px 0px;
    padding: 0px 24px;
    width: auto;
    height: 40px;
    font-size: 16px;
    color: rgb(255, 255, 255);
    border: 0px;
    cursor: pointer;
    background: var(--theme1);
    border-radius: 6px;
}
.center_view .formModel_btn_box .formModel_cancel:hover{opacity: 0.8;}


.usersTabHoverView {
    position: absolute;
    top: 42px;
    color: #000;
    background: #eee;
    width: 100%;
    left: 0;
    line-height: 40px;
    z-index: 9;
}

.usersTabHoverTab:hover {
    color: var(--theme)!important;
}

</style>
